<!--<template>-->
<!--  <div class="home" style="width: 100%;padding: 10px">-->
<!--    <div style="margin:10px 0;">-->
<!--      <el-input clearable v-model="search.name" placeholder="请输入姓名" style="width:20%;margin-right:10px;"></el-input>-->
<!--      <el-input clearable v-model="search.phone" placeholder="请输入手机号" style="width:20%;margin-right:10px;"></el-input>-->
<!--      <el-input clearable v-model="search.idCard" placeholder="请输入身份证号" style="width:20%;margin-right:10px;"></el-input>-->
<!--      <el-button type="primary" @click="load">查询</el-button>-->
<!--    </div>-->
<!--    <el-table :data="paginatedData" border stripe style="width: 100%;">-->
<!--      <el-table-column prop="anHao" label="案号" />-->
<!--      <el-table-column prop="proposer" label="申请人" />-->
<!--      <el-table-column prop="executor" label="被执行人" />-->
<!--      <el-table-column prop="idNumber" label="被执行人身份证" />-->
<!--      <el-table-column prop="phone" label="被执行人手机号" />-->
<!--      <el-table-column prop="caseDetail" label="案件内容" />-->
<!--      <el-table-column prop="caseMoney" label="申请执行金额（元）" />-->
<!--    </el-table>-->
<!--    <el-pagination  -->
<!--      @size-change="handleSizeChange"  -->
<!--      @current-change="handleCurrentChange"  -->
<!--      :current-page="currentPage"  -->
<!--      :page-sizes="[10, 20, 30, 40]"  -->
<!--      :page-size="pageSize"  -->
<!--      layout="total, sizes, prev, pager, next, jumper"  -->
<!--      :total="total"  -->
<!--    >  -->
<!--    </el-pagination>-->
<!--    &lt;!&ndash; <div class="demo-pagination-block">-->
<!--        <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20]"-->
<!--          :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
<!--      </div> &ndash;&gt;-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { request } from '@/utils/request';-->
<!--import axios from 'axios';-->

<!--export default {-->
<!--  name: 'HomeView1',-->
<!--  components: {-->

<!--  },-->
<!--  mounted() {  -->
<!--    this.load();  -->
<!--  }, -->
<!--  data() {-->
<!--    return {-->
<!--      search: {-->
<!--        name: '',-->
<!--        phone: '',-->
<!--        idCard: ''-->
<!--      },-->
<!--      tableData: [],-->
<!--      currentPage: 1,-->
<!--      pageSize: 10,-->
<!--      total: 0,-->
<!--      paginatedData: []-->
<!--    };-->
<!--  },-->
<!--  -->
<!--  methods: {-->
<!--    load() {-->
<!--      axios.post("/api/caseInformation/getCaseInformation", {-->
<!--        executor: this.search.name,-->
<!--        phone: this.search.phone,-->
<!--        idNumber: this.search.idCard,-->
<!--      })-->
<!--      .then(response => {-->
<!--        const result = response.data;-->
<!--        this.tableData = result;-->
<!--        this.total = this.tableData.length;-->
<!--        this.fetchData();-->

<!--      })-->
<!--      .catch(error => {-->
<!--        console.log('error', error);-->
<!--      });-->
<!--    },-->

<!--    add() {-->
<!--      this.dialogVisible = true;-->
<!--      this.form = {};-->
<!--    },-->
<!--    fetchData() {   -->
<!--      const start = (this.currentPage - 1) * this.pageSize;  -->
<!--      const end = start + this.pageSize;  -->
<!--      this.paginatedData = this.tableData.slice(start, end);  -->
<!--    },  -->

<!--    handleEdit(row) {-->
<!--      this.form = JSON.parse(JSON.stringify(row));  // deep copy to prevent modifying original data-->
<!--      this.dialogVisible = true;-->
<!--    },-->
<!--    handleSizeChange(pageSize) {-->
<!--      this.pageSize = pageSize;-->
<!--      this.load();-->
<!--    },-->
<!--    handleCurrentChange(pageNum) {-->
<!--      this.currentPage = pageNum;-->
<!--      this.load();-->
<!--    },-->

<!--  }-->
<!--}-->
<!--</script>-->

<!--<template>-->
<!--  <div class="knowledge-graph-dashboard">-->
<!--    &lt;!&ndash; 查询区域 &ndash;&gt;-->
<!--    <div class="search-section">-->
<!--      <div class="search-form">-->
<!--        <el-input-->
<!--            clearable-->
<!--            v-model="search.name"-->
<!--            placeholder="请输入姓名"-->
<!--            style="flex: 1; margin-right: 10px;"-->
<!--        />-->
<!--        <el-input-->
<!--            clearable-->
<!--            v-model="search.phone"-->
<!--            placeholder="请输入手机号"-->
<!--            style="flex: 1; margin-right: 10px;"-->
<!--        />-->
<!--        <el-input-->
<!--            clearable-->
<!--            v-model="search.idCard"-->
<!--            placeholder="请输入身份证号"-->
<!--            style="flex: 1; margin-right: 10px;"-->
<!--        />-->
<!--        <el-button type="primary" @click="quickSearch">智能分析</el-button>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="content-wrapper">-->
<!--      &lt;!&ndash; 左侧：知识图谱 &ndash;&gt;-->
<!--&lt;!&ndash;      <div class="graph-section">&ndash;&gt;-->
<!--&lt;!&ndash;        <div class="graph-container">&ndash;&gt;-->
<!--&lt;!&ndash;          <div ref="graphContainer" class="graph-content"></div>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--      &lt;!&ndash; 新增：斥候系统图谱 &ndash;&gt;-->
<!--      <div class="new-graph-section">-->
<!--        <div class="new-graph-container">-->
<!--          <div ref="newGraphContainer" class="new-graph-content"></div>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 右侧：统计信息 &ndash;&gt;-->
<!--      <div class="stats-section">-->
<!--        <div class="stat-card">-->
<!--          <div class="stat-value">{{ stats.totalCases }}</div>-->
<!--          <div class="stat-label">案件总数</div>-->
<!--        </div>-->
<!--        <div class="stat-card">-->
<!--          <div class="stat-value">{{ stats.caseTypes }}</div>-->
<!--          <div class="stat-label">案件类型</div>-->
<!--        </div>-->
<!--        <div class="stat-card">-->
<!--          <div class="stat-value">{{ stats.locatableCases }}</div>-->
<!--          <div class="stat-label">可拘传案件</div>-->
<!--        </div>-->
<!--        <div class="stat-card">-->
<!--          <div class="stat-value">{{ stats.relatedCases }}</div>-->
<!--          <div class="stat-label">可确定关联人案件</div>-->
<!--        </div>-->
<!--        &lt;!&ndash; 新增不动产统计卡片 &ndash;&gt;-->
<!--        <div class="stat-card">-->
<!--          <div class="stat-value">164</div>-->
<!--          <div class="stat-label">不动产数据(101人)</div>-->
<!--        </div>-->
<!--        <div class="stat-card">-->
<!--          <div class="stat-value">205</div>-->
<!--          <div class="stat-label">个企数据(81人)</div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {ref, onMounted, onBeforeUnmount, nextTick} from 'vue';-->
<!--import * as echarts from 'echarts';-->
<!--import {useRouter} from 'vue-router';-->
<!--import axios from 'axios';-->

<!--// 修改 setup 函数中的代码-->
<!--export default {-->
<!--  name: 'KnowledgeGraphDashboard',-->
<!--  setup() {-->
<!--    const router = useRouter();-->
<!--    const graphContainer = ref(null);-->
<!--    let graphChart = null;-->

<!--    const search = ref({-->
<!--      name: '',-->
<!--      phone: '',-->
<!--      idCard: ''-->
<!--    });-->

<!--    const stats = ref({-->
<!--      totalCases: 0,-->
<!--      caseTypes: 0,-->
<!--      locatableCases: 0,-->
<!--      relatedCases: 0-->
<!--    });-->

<!--    const caseTypes = ref([]); // 改为响应式变量-->

<!--    // 获取案件类型数据-->
<!--    const loadCaseTypes = () => {-->
<!--      // 获取案件类型统计数据-->
<!--      axios.get("/api/caseInformation/getCaseTypeStats")-->
<!--          .then(response => {-->
<!--            // 转换为数组格式，按数量降序排列-->
<!--            caseTypes.value = Object.keys(response.data)-->
<!--                .map(type => ({-->
<!--                  name: type,-->
<!--                  count: response.data[type]-->
<!--                }))-->
<!--                .sort((a, b) => b.count - a.count);-->

<!--            // 初始化知识图谱-->
<!--            initKnowledgeGraph();-->
<!--          })-->
<!--          .catch(() => {-->
<!--            // 如果获取失败，使用默认数据-->
<!--            caseTypes.value = [-->
<!--              {name: '民间借贷纠纷', count: 320},-->
<!--              {name: '买卖合同纠纷', count: 280},-->
<!--              {name: '金融借款合同纠纷', count: 195},-->
<!--              {name: '离婚纠纷', count: 160},-->
<!--              {name: '机动车交通事故责任纠纷', count: 120},-->
<!--              {name: '劳动争议', count: 95},-->
<!--              {name: '建设工程施工合同纠纷', count: 80},-->
<!--              {name: '其他', count: 298}-->
<!--            ];-->
<!--            initKnowledgeGraph();-->
<!--          });-->
<!--    };-->


<!--    // 初始化知识图谱-->
<!--    const initKnowledgeGraph = () => {-->
<!--      if (!graphContainer.value) return;-->

<!--      graphChart = echarts.init(graphContainer.value);-->

<!--      // 构建图谱数据-->
<!--      const nodes = [-->
<!--        // 中心节点-->
<!--        {-->
<!--          id: 'center',-->
<!--          name: '案件类型分析',-->
<!--          symbolSize: 100,-->
<!--          category: 0,-->
<!--          draggable: true,-->
<!--          value: '中心节点'-->
<!--        }-->
<!--      ];-->

<!--      // 添加案件类型节点-->
<!--      caseTypes.value.forEach((type, index) => {-->
<!--        nodes.push({-->
<!--          id: `type_${index}`,-->
<!--          name: type.name,-->
<!--          symbolSize: 60,-->
<!--          category: 1,-->
<!--          draggable: true,-->
<!--          value: `案件数量: ${type.count}`,-->
<!--          caseType: type.name-->
<!--        });-->
<!--      });-->

<!--      // 构建连接关系-->
<!--      const links = caseTypes.value.map((type, index) => ({-->
<!--        source: 'center',-->
<!--        target: `type_${index}`,-->
<!--        name: '包含'-->
<!--      }));-->

<!--      const option = {-->
<!--        title: {-->
<!--          text: '案件类型分布图谱',-->
<!--          subtext: '点击案件类型查看详细信息',-->
<!--          top: '20',-->
<!--          // left: 'center',-->
<!--          left: '20',-->
<!--          // textStyle: {-->
<!--          //   fontSize: 16,-->
<!--          //   color: '#333'-->
<!--          // },-->
<!--          // subtextStyle: {-->
<!--          //   color: '#666'-->
<!--          // }-->
<!--          textStyle: {-->
<!--            fontSize: 20,-->
<!--            fontWeight: 'bold',-->
<!--            color: '#1a73e8', // 更亮的蓝色-->
<!--            textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--            textShadowBlur: 2,-->
<!--            textShadowOffsetX: 1,-->
<!--            textShadowOffsetY: 1-->
<!--          },-->
<!--          subtextStyle: {-->
<!--            color: '#444444', // 更亮的黑色-->
<!--            fontSize: 16,-->
<!--            fontWeight: 'bold',-->
<!--            fontStyle: 'normal', // 去掉斜体-->
<!--            textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--            textShadowBlur: 2,-->
<!--            textShadowOffsetX: 1,-->
<!--            textShadowOffsetY: 1-->
<!--          }-->
<!--        },-->
<!--        tooltip: {-->
<!--          formatter: function (params) {-->
<!--            if (params.dataType === 'node') {-->
<!--              return `${params.name}<br/>${params.data.value || ''}`;-->
<!--            } else if (params.dataType === 'edge') {-->
<!--              return `${params.data.source} -> ${params.data.target}<br/>${params.data.name || ''}`;-->
<!--            }-->
<!--            return '';-->
<!--          }-->
<!--        },-->
<!--        legend: [{-->
<!--          data: ['中心节点', '案件类型'],-->
<!--          bottom: '10',-->
<!--          right: '10',-->
<!--          textStyle: {-->
<!--            color: '#333'-->
<!--          }-->
<!--        }],-->
<!--        animationDuration: 1500,-->
<!--        animationEasingUpdate: 'quinticInOut',-->
<!--        series: [{-->
<!--          name: '案件类型图谱',-->
<!--          type: 'graph',-->
<!--          layout: 'force',-->
<!--          force: {-->
<!--            repulsion: 550, // 增大节点间斥力-->
<!--            gravity: 0.1, // 减小重力-->
<!--            edgeLength: 200, // 增大边长-->
<!--            layoutAnimation: true-->
<!--          },-->
<!--          data: nodes,-->
<!--          links: links,-->
<!--          categories: [-->
<!--            {name: '中心节点', itemStyle: {color: '#409eff'}},-->
<!--            {name: '案件类型', itemStyle: {color: '#67c23a'}}-->
<!--          ],-->
<!--          roam: true,-->
<!--          label: {-->
<!--            show: true,-->
<!--            position: 'inside',-->
<!--            formatter: '{b}',-->
<!--            fontSize: 14, // 增大字体-->
<!--            color: '#000000',-->
<!--            overflow: 'truncate', // 处理文字溢出-->
<!--            width: 90 // 设置文字宽度-->
<!--          },-->
<!--          labelLayout: {-->
<!--            hideOverlap: false // 不隐藏重叠文字-->
<!--          },-->
<!--          emphasis: {-->
<!--            focus: 'adjacency',-->
<!--            lineStyle: {-->
<!--              width: 5-->
<!--            }-->
<!--          },-->
<!--          lineStyle: {-->
<!--            color: 'source',-->
<!--            curveness: 0.1-->
<!--          }-->
<!--        }]-->
<!--      };-->

<!--      graphChart.setOption(option, true);-->

<!--      // 节点点击事件-->
<!--      graphChart.off('click');-->
<!--      graphChart.on('click', (params) => {-->
<!--        if (params.dataType === 'node' && params.data.caseType && params.data.id !== 'center') {-->
<!--          // 点击案件类型节点，获取该类型案件列表-->
<!--          loadCaseDetailsByType(params.data.caseType);-->
<!--        }-->
<!--      });-->
<!--    };-->

<!--    // 根据案件类型加载案件详情-->
<!--    const loadCaseDetailsByType = (caseType) => {-->
<!--      axios.post("/api/caseInformation/getByCaseType", {-->
<!--        caseType: caseType-->
<!--      }).then(response => {-->
<!--        const cases = response.data;-->
<!--        if (cases && cases.length > 0) {-->
<!--          // 重新构建图谱数据，以该案件类型为主节点-->
<!--          const nodes = [];-->
<!--          const links = [];-->

<!--          // 主节点：案件类型-->
<!--          const mainNode = {-->
<!--            id: 'main',-->
<!--            name: caseType,-->
<!--            symbolSize: 100,-->
<!--            category: 0,-->
<!--            draggable: true,-->
<!--            value: `案件数量: ${cases.length}`,-->
<!--            caseType: caseType-->
<!--          };-->
<!--          nodes.push(mainNode);-->

<!--          // 添加案件节点（最多显示10个）-->
<!--          const displayCases = cases.slice(0, 10);-->
<!--          displayCases.forEach((caseInfo, index) => {-->
<!--            const nodeId = `case_${index}`;-->
<!--            nodes.push({-->
<!--              id: nodeId,-->
<!--              name: caseInfo.anHao || `案件${index + 1}`,-->
<!--              symbolSize: 60,-->
<!--              category: 1,-->
<!--              draggable: true,-->
<!--              value: `被执行人: ${caseInfo.executor || '未知'}\n金额: ${caseInfo.caseMoney || '未知'}`,-->
<!--              caseInfo: caseInfo-->
<!--            });-->

<!--            // 连接主节点和案件节点-->
<!--            links.push({-->
<!--              source: 'main',-->
<!--              target: nodeId,-->
<!--              name: '包含'-->
<!--            });-->
<!--          });-->

<!--          // 更新图谱配置-->
<!--          const option = {-->
<!--            title: {-->
<!--              text: `${caseType}案件详情`,-->
<!--              subtext: '点击案件节点查看详细信息，点击中心节点返回',-->
<!--              top: '20',-->
<!--              // left: 'center',-->
<!--              left: '20',-->
<!--              // textStyle: {-->
<!--              //   fontSize: 16,-->
<!--              //   color: '#333'-->
<!--              // },-->
<!--              textStyle: {-->
<!--                fontSize: 20,-->
<!--                fontWeight: 'bold',-->
<!--                color: '#1a73e8', // 更亮的蓝色-->
<!--                textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--                textShadowBlur: 2,-->
<!--                textShadowOffsetX: 1,-->
<!--                textShadowOffsetY: 1-->
<!--              },-->
<!--              subtextStyle: {-->
<!--                color: '#444444', // 更亮的黑色-->
<!--                fontSize: 16,-->
<!--                fontWeight: 'bold',-->
<!--                fontStyle: 'normal', // 去掉斜体-->
<!--                textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--                textShadowBlur: 2,-->
<!--                textShadowOffsetX: 1,-->
<!--                textShadowOffsetY: 1-->
<!--              }-->
<!--            },-->
<!--            tooltip: {-->
<!--              formatter: function (params) {-->
<!--                if (params.dataType === 'node') {-->
<!--                  return `${params.name}<br/>${params.data.value || ''}`;-->
<!--                } else if (params.dataType === 'edge') {-->
<!--                  return `${params.data.source} -> ${params.data.target}<br/>${params.data.name || ''}`;-->
<!--                }-->
<!--                return '';-->
<!--              }-->
<!--            },-->
<!--            legend: [{-->
<!--              data: ['案件类型', '具体案件'],-->
<!--              bottom: '10',-->
<!--              right: '10',-->
<!--              textStyle: {-->
<!--                color: '#333'-->
<!--              }-->
<!--            }],-->
<!--            animationDuration: 1500,-->
<!--            animationEasingUpdate: 'quinticInOut',-->
<!--            series: [{-->
<!--              name: '案件详情图谱',-->
<!--              type: 'graph',-->
<!--              layout: 'force',-->
<!--              force: {-->
<!--                repulsion: 550, // 增大节点间斥力-->
<!--                gravity: 0.1,-->
<!--                edgeLength: 200, // 增大边长-->
<!--                layoutAnimation: true-->
<!--              },-->
<!--              data: nodes,-->
<!--              links: links,-->
<!--              categories: [-->
<!--                {name: '案件类型', itemStyle: {color: '#409eff'}},-->
<!--                {name: '具体案件', itemStyle: {color: '#67c23a'}}-->
<!--              ],-->
<!--              roam: true,-->
<!--              label: {-->
<!--                show: true,-->
<!--                position: 'inside',-->
<!--                formatter: '{b}',-->
<!--                fontSize: 14, // 增大字体-->
<!--                color: '#000000',-->
<!--                overflow: 'truncate',-->
<!--                width: 90-->
<!--              },-->
<!--              labelLayout: {-->
<!--                hideOverlap: false // 不隐藏重叠文字-->
<!--              },-->
<!--              emphasis: {-->
<!--                focus: 'adjacency',-->
<!--                lineStyle: {-->
<!--                  width: 5-->
<!--                }-->
<!--              },-->
<!--              lineStyle: {-->
<!--                color: 'source',-->
<!--                curveness: 0.1-->
<!--              }-->
<!--            }]-->
<!--          };-->

<!--          graphChart.setOption(option, true);-->

<!--          // 重新绑定点击事件-->
<!--          graphChart.off('click');-->
<!--          graphChart.on('click', (newParams) => {-->
<!--            if (newParams.dataType === 'node' && newParams.data.caseInfo) {-->
<!--              // 点击具体案件节点，跳转到DataSummary页面-->
<!--              const caseInfo = newParams.data.caseInfo;-->
<!--              router.push({-->
<!--                name: 'DataSummary',-->
<!--                query: {-->
<!--                  idNumber: caseInfo.idNumber,-->
<!--                  name: caseInfo.executor,-->
<!--                  phone: caseInfo.phone-->
<!--                }-->
<!--              });-->
<!--            } else if (newParams.dataType === 'node' && newParams.data.caseType) {-->
<!--              // 点击主节点（案件类型），返回到原始图谱-->
<!--              initKnowledgeGraph();-->
<!--            }-->
<!--          });-->
<!--        }-->
<!--      });-->
<!--    };-->

<!--    // 根据搜索条件加载人员相关案件-->
<!--    const loadPersonRelatedCases = (searchData) => {-->
<!--      // 构造符合后端接口要求的请求数据-->
<!--      const requestData = {-->
<!--        executor: searchData.name || "",-->
<!--        phone: searchData.phone || "",-->
<!--        idNumber: searchData.idCard || ""-->
<!--      };-->

<!--      axios.post("/api/caseInformation/getCaseInformation", requestData)-->
<!--          .then(response => {-->
<!--            const cases = response.data;-->
<!--            if (cases && cases.length > 0) {-->
<!--              // 按案件类型分组-->
<!--              const casesByType = {};-->
<!--              cases.forEach(caseItem => {-->
<!--                // 后端实体类字段是caseDetail，对应案件类型-->
<!--                const type = caseItem.caseDetail || '其他';-->
<!--                if (!casesByType[type]) {-->
<!--                  casesByType[type] = [];-->
<!--                }-->
<!--                casesByType[type].push(caseItem);-->
<!--              });-->

<!--              // 构建图谱数据-->
<!--              const nodes = [];-->
<!--              const links = [];-->

<!--              // 主节点：搜索的人员-->
<!--              let personName = searchData.name || '搜索结果';-->
<!--              if (searchData.phone) personName += ` (${searchData.phone})`;-->
<!--              if (searchData.idCard) personName += ` (${searchData.idCard})`;-->

<!--              const mainNode = {-->
<!--                id: 'person',-->
<!--                name: personName,-->
<!--                symbolSize: 80,-->
<!--                category: 0,-->
<!--                draggable: true,-->
<!--                value: `相关案件: ${cases.length} 个`-->
<!--              };-->
<!--              nodes.push(mainNode);-->

<!--              // 添加案件类型节点-->
<!--              Object.keys(casesByType).forEach((caseType, index) => {-->
<!--                const typeNodeId = `type_${index}`;-->
<!--                nodes.push({-->
<!--                  id: typeNodeId,-->
<!--                  name: caseType,-->
<!--                  symbolSize: 60,-->
<!--                  category: 1,-->
<!--                  draggable: true,-->
<!--                  value: `案件数量: ${casesByType[caseType].length}`,-->
<!--                  caseType: caseType-->
<!--                });-->

<!--                // 连接人员节点和案件类型节点-->
<!--                links.push({-->
<!--                  source: 'person',-->
<!--                  target: typeNodeId,-->
<!--                  name: '涉及'-->
<!--                });-->
<!--              });-->

<!--              // 更新图谱配置-->
<!--              const option = {-->
<!--                title: {-->
<!--                  text: `人员"${personName}"相关案件`,-->
<!--                  subtext: '点击案件类型查看详细信息，点击中心节点返回',-->
<!--                  top: '20',-->
<!--                  // left: 'center',-->
<!--                  left: '20',-->
<!--                  // textStyle: {-->
<!--                  //   fontSize: 16,-->
<!--                  //   color: '#333'-->
<!--                  // },-->
<!--                  textStyle: {-->
<!--                    fontSize: 20,-->
<!--                    fontWeight: 'bold',-->
<!--                    color: '#1a73e8', // 更亮的蓝色-->
<!--                    textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--                    textShadowBlur: 2,-->
<!--                    textShadowOffsetX: 1,-->
<!--                    textShadowOffsetY: 1-->
<!--                  },-->
<!--                  // subtextStyle: {-->
<!--                  //   color: '#666'-->
<!--                  // }-->
<!--                  subtextStyle: {-->
<!--                    color: '#444444', // 更亮的黑色-->
<!--                    fontSize: 16,-->
<!--                    fontWeight: 'bold',-->
<!--                    fontStyle: 'normal', // 去掉斜体-->
<!--                    textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--                    textShadowBlur: 2,-->
<!--                    textShadowOffsetX: 1,-->
<!--                    textShadowOffsetY: 1-->
<!--                  }-->
<!--                },-->
<!--                tooltip: {-->
<!--                  formatter: function (params) {-->
<!--                    if (params.dataType === 'node') {-->
<!--                      return `${params.name}<br/>${params.data.value || ''}`;-->
<!--                    } else if (params.dataType === 'edge') {-->
<!--                      return `${params.data.source} -> ${params.data.target}<br/>${params.data.name || ''}`;-->
<!--                    }-->
<!--                    return '';-->
<!--                  }-->
<!--                },-->
<!--                legend: [{-->
<!--                  data: ['人员', '案件类型'],-->
<!--                  bottom: '10',-->
<!--                  right: '10',-->
<!--                  textStyle: {-->
<!--                    color: '#333'-->
<!--                  }-->
<!--                }],-->
<!--                animationDuration: 1500,-->
<!--                animationEasingUpdate: 'quinticInOut',-->
<!--                series: [{-->
<!--                  name: '人员相关案件图谱',-->
<!--                  type: 'graph',-->
<!--                  layout: 'force',-->
<!--                  force: {-->
<!--                    repulsion: 300,-->
<!--                    gravity: 0.1,-->
<!--                    edgeLength: 200,-->
<!--                    layoutAnimation: true-->
<!--                  },-->
<!--                  data: nodes,-->
<!--                  links: links,-->
<!--                  categories: [-->
<!--                    {name: '人员', itemStyle: {color: '#409eff'}},-->
<!--                    {name: '案件类型', itemStyle: {color: '#67c23a'}}-->
<!--                  ],-->
<!--                  roam: true,-->
<!--                  label: {-->
<!--                    show: true,-->
<!--                    position: 'inside',-->
<!--                    formatter: '{b}',-->
<!--                    fontSize: 12,-->
<!--                    color: '#000000'-->
<!--                  },-->
<!--                  labelLayout: {-->
<!--                    hideOverlap: true-->
<!--                  },-->
<!--                  emphasis: {-->
<!--                    focus: 'adjacency',-->
<!--                    lineStyle: {-->
<!--                      width: 5-->
<!--                    }-->
<!--                  },-->
<!--                  lineStyle: {-->
<!--                    color: 'source',-->
<!--                    curveness: 0.1-->
<!--                  }-->
<!--                }]-->
<!--              };-->

<!--              graphChart.setOption(option, true);-->

<!--              // 绑定点击事件-->
<!--              graphChart.off('click');-->
<!--              graphChart.on('click', (params) => {-->
<!--                if (params.dataType === 'node' && params.data.caseType) {-->
<!--                  // 点击案件类型节点，显示该类型下的具体案件-->
<!--                  showCasesOfType(params.data.caseType, casesByType[params.data.caseType]);-->
<!--                } else if (params.dataType === 'node' && params.data.id === 'person') {-->
<!--                  // 点击人员节点，返回到原始图谱-->
<!--                  initKnowledgeGraph();-->
<!--                }-->
<!--              });-->
<!--            } else {-->
<!--              // 没有找到相关案件-->
<!--              const option = {-->
<!--                title: {-->
<!--                  text: '未找到相关案件',-->
<!--                  subtext: '请尝试其他搜索条件',-->
<!--                  top: 'center',-->
<!--                  left: 'center',-->
<!--                  textStyle: {-->
<!--                    fontSize: 20,-->
<!--                    fontWeight: 'bold',-->
<!--                    color: '#1a73e8', // 更亮的蓝色-->
<!--                    textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--                    textShadowBlur: 2,-->
<!--                    textShadowOffsetX: 1,-->
<!--                    textShadowOffsetY: 1-->
<!--                  },-->
<!--                }-->
<!--              };-->
<!--              graphChart.setOption(option, true);-->
<!--            }-->
<!--          })-->
<!--          .catch(() => {-->
<!--            // 请求失败处理-->
<!--            const option = {-->
<!--              title: {-->
<!--                text: '搜索失败',-->
<!--                subtext: '请稍后重试',-->
<!--                top: 'center',-->
<!--                left: 'center',-->
<!--                textStyle: {-->
<!--                  fontSize: 20,-->
<!--                  fontWeight: 'bold',-->
<!--                  color: '#1a73e8', // 更亮的蓝色-->
<!--                  textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--                  textShadowBlur: 2,-->
<!--                  textShadowOffsetX: 1,-->
<!--                  textShadowOffsetY: 1-->
<!--                },-->
<!--              }-->
<!--            };-->
<!--            graphChart.setOption(option, true);-->
<!--          });-->
<!--    };-->

<!--    // 显示特定类型的案件详情-->
<!--    const showCasesOfType = (caseType, cases) => {-->
<!--      // 构建图谱数据-->
<!--      const nodes = [];-->
<!--      const links = [];-->

<!--      // 主节点：案件类型-->
<!--      const mainNode = {-->
<!--        id: 'main',-->
<!--        name: caseType,-->
<!--        symbolSize: 80,-->
<!--        category: 0,-->
<!--        draggable: true,-->
<!--        value: `案件数量: ${cases.length}`,-->
<!--        caseType: caseType-->
<!--      };-->
<!--      nodes.push(mainNode);-->

<!--      // 添加案件节点-->
<!--      cases.forEach((caseInfo, index) => {-->
<!--        const nodeId = `case_${index}`;-->
<!--        nodes.push({-->
<!--          id: nodeId,-->
<!--          name: caseInfo.anHao || `案件${index + 1}`,-->
<!--          symbolSize: 60,-->
<!--          category: 1,-->
<!--          draggable: true,-->
<!--          value: `被执行人: ${caseInfo.executor || '未知'}\n金额: ${caseInfo.caseMoney || '未知'}`,-->
<!--          caseInfo: caseInfo-->
<!--        });-->

<!--        // 连接主节点和案件节点-->
<!--        links.push({-->
<!--          source: 'main',-->
<!--          target: nodeId,-->
<!--          name: '包含'-->
<!--        });-->
<!--      });-->

<!--      // 更新图谱配置-->
<!--      const option = {-->
<!--        title: {-->
<!--          text: `${caseType}案件详情`,-->
<!--          subtext: '点击案件节点查看详细信息，点击中心节点返回',-->
<!--          top: '20',-->
<!--          // left: 'center',-->
<!--          left: '20',-->
<!--          // textStyle: {-->
<!--          //   fontSize: 16,-->
<!--          //   color: '#333'-->
<!--          // },-->
<!--          textStyle: {-->
<!--            fontSize: 20,-->
<!--            fontWeight: 'bold',-->
<!--            color: '#1a73e8', // 更亮的蓝色-->
<!--            textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--            textShadowBlur: 2,-->
<!--            textShadowOffsetX: 1,-->
<!--            textShadowOffsetY: 1-->
<!--          },-->
<!--          // subtextStyle: {-->
<!--          //   color: '#666'-->
<!--          // }-->
<!--          subtextStyle: {-->
<!--            color: '#444444', // 更亮的黑色-->
<!--            fontSize: 16,-->
<!--            fontWeight: 'bold',-->
<!--            fontStyle: 'normal', // 去掉斜体-->
<!--            textShadowColor: 'rgba(0, 0, 0, 0.2)',-->
<!--            textShadowBlur: 2,-->
<!--            textShadowOffsetX: 1,-->
<!--            textShadowOffsetY: 1-->
<!--          }-->
<!--        },-->
<!--        tooltip: {-->
<!--          formatter: function (params) {-->
<!--            if (params.dataType === 'node') {-->
<!--              return `${params.name}<br/>${params.data.value || ''}`;-->
<!--            } else if (params.dataType === 'edge') {-->
<!--              return `${params.data.source} -> ${params.data.target}<br/>${params.data.name || ''}`;-->
<!--            }-->
<!--            return '';-->
<!--          }-->
<!--        },-->
<!--        legend: [{-->
<!--          data: ['案件类型', '具体案件'],-->
<!--          bottom: '10',-->
<!--          right: '10',-->
<!--          textStyle: {-->
<!--            color: '#333'-->
<!--          }-->
<!--        }],-->
<!--        animationDuration: 1500,-->
<!--        animationEasingUpdate: 'quinticInOut',-->
<!--        series: [{-->
<!--          name: '案件详情图谱',-->
<!--          type: 'graph',-->
<!--          layout: 'force',-->
<!--          force: {-->
<!--            repulsion: 300,-->
<!--            gravity: 0.1,-->
<!--            edgeLength: 200,-->
<!--            layoutAnimation: true-->
<!--          },-->
<!--          data: nodes,-->
<!--          links: links,-->
<!--          categories: [-->
<!--            {name: '案件类型', itemStyle: {color: '#409eff'}},-->
<!--            {name: '具体案件', itemStyle: {color: '#67c23a'}}-->
<!--          ],-->
<!--          roam: true,-->
<!--          label: {-->
<!--            show: true,-->
<!--            position: 'inside',-->
<!--            formatter: '{b}',-->
<!--            fontSize: 12,-->
<!--            color: '#000000'-->
<!--          },-->
<!--          labelLayout: {-->
<!--            hideOverlap: true-->
<!--          },-->
<!--          emphasis: {-->
<!--            focus: 'adjacency',-->
<!--            lineStyle: {-->
<!--              width: 5-->
<!--            }-->
<!--          },-->
<!--          lineStyle: {-->
<!--            color: 'source',-->
<!--            curveness: 0.1-->
<!--          }-->
<!--        }]-->
<!--      };-->

<!--      graphChart.setOption(option, true);-->

<!--      // 绑定点击事件-->
<!--      graphChart.off('click');-->
<!--      graphChart.on('click', (params) => {-->
<!--        if (params.dataType === 'node' && params.data.caseInfo) {-->
<!--          // 点击具体案件节点，跳转到DataSummary页面-->
<!--          const caseInfo = params.data.caseInfo;-->
<!--          router.push({-->
<!--            name: 'DataSummary',-->
<!--            query: {-->
<!--              idNumber: caseInfo.idNumber,-->
<!--              name: caseInfo.executor,-->
<!--              phone: caseInfo.phone-->
<!--            }-->
<!--          });-->
<!--        } else if (params.dataType === 'node' && params.data.caseType) {-->
<!--          // 点击主节点（案件类型），返回到人员相关案件图谱-->
<!--          // 由于我们没有保存原始搜索条件，这里简单地重新初始化图谱-->
<!--          initKnowledgeGraph();-->
<!--        }-->
<!--      });-->
<!--    };-->

<!--    // 获取统计数据-->
<!--    const loadStats = () => {-->
<!--      // 获取案件总数-->
<!--      axios.get("/api/caseInformation/count")-->
<!--          .then(response => {-->
<!--            stats.value.totalCases = response.data;-->
<!--          })-->
<!--          .catch(() => {-->
<!--            stats.value.totalCases = 1248; // 默认值-->
<!--          });-->

<!--      // 获取案件类型数-->
<!--      axios.get("/api/caseInformation/getCountTypes")-->
<!--          .then(response => {-->
<!--            stats.value.caseTypes = response.data;-->
<!--          })-->
<!--          .catch(() => {-->
<!--            stats.value.caseTypes = 8; // 默认值-->
<!--          });-->

<!--      // 获取可定位案件数量-->
<!--      axios.get("/api/caseInformation/locatableCount")-->
<!--          .then(response => {-->
<!--            stats.value.locatableCases = response.data;-->
<!--          })-->
<!--          .catch(() => {-->
<!--            stats.value.locatableCases = 5; // 默认值-->
<!--          });-->

<!--      // 获取有关联人案件数量-->
<!--      axios.get("/api/relatedPeople/caseCount")-->
<!--          .then(response => {-->
<!--            stats.value.relatedCases = response.data;-->
<!--          })-->
<!--          .catch(() => {-->
<!--            stats.value.relatedCases = 5; // 默认值-->
<!--          });-->
<!--    };-->

<!--    // 快速查询-->
<!--    const quickSearch = () => {-->
<!--      const searchData = {-->
<!--        name: search.value.name.trim(),-->
<!--        phone: search.value.phone.trim(),-->
<!--        idCard: search.value.idCard.trim()-->
<!--      };-->

<!--      // 如果有任何搜索条件，则执行搜索-->
<!--      if (searchData.name || searchData.phone || searchData.idCard) {-->
<!--        loadPersonRelatedCases(searchData);-->
<!--      } else {-->
<!--        // 如果没有搜索条件，则回到初始图谱-->
<!--        initKnowledgeGraph();-->
<!--      }-->
<!--    };-->

<!--    // 窗口大小改变时重绘图表-->
<!--    const handleResize = () => {-->
<!--      if (graphChart) {-->
<!--        graphChart.resize();-->
<!--      }-->
<!--    };-->

<!--    // 新图谱相关变量-->
<!--    const newGraphContainer = ref(null);-->
<!--    let newGraphChart = null;-->

<!--// 初始化斥候系统图谱-->
<!--    const initNewKnowledgeGraph = () => {-->
<!--      if (!newGraphContainer.value) {  console.error('newGraphContainer is null or undefined');return;}-->

<!--      newGraphChart = echarts.init(newGraphContainer.value);-->

<!--      const nodes = [-->
<!--        // 中心节点：斥候系统-->
<!--        {-->
<!--          id: 'system',-->
<!--          name: '海法 · 斥候',-->
<!--          symbolSize: 100,-->
<!--          category: 0,-->
<!--          draggable: true,-->
<!--          // value: '核心系统',-->
<!--          itemStyle: { color: '#409eff' }-->
<!--        },-->
<!--        // 子节点：业务模块-->
<!--        {-->
<!--          id: 'songda',-->
<!--          name: '司法送达/强制拘传',-->
<!--          symbolSize: 60,-->
<!--          category: 1,-->
<!--          draggable: true,-->
<!--          // value: '案件执行支持',-->
<!--          itemStyle: { color: '#67c23a' }-->
<!--        },-->
<!--        {-->
<!--          id: 'guanlian',-->
<!--          name: '关联人/财产查询',-->
<!--          symbolSize: 60,-->
<!--          category: 1,-->
<!--          draggable: true,-->
<!--          // value: '资产线索挖掘',-->
<!--          itemStyle: { color: '#e6a23c' }-->
<!--        },-->
<!--        {-->
<!--          id: 'qingchang',-->
<!--          name: '强制清场辅助',-->
<!--          symbolSize: 60,-->
<!--          category: 1,-->
<!--          draggable: true,-->
<!--          // value: '现场处置支持',-->
<!--          itemStyle: { color: '#f56c6c' }-->
<!--        },-->
<!--        {-->
<!--          id: 'pinggu',-->
<!--          name: '企业评估/反担保',-->
<!--          symbolSize: 60,-->
<!--          category: 1,-->
<!--          draggable: true,-->
<!--          // value: '风险评估与控制',-->
<!--          itemStyle: { color: '#909399' }-->
<!--        },-->
<!--        {-->
<!--          id: 'fankui',-->
<!--          name: '运算反馈修正',-->
<!--          symbolSize: 60,-->
<!--          category: 1,-->
<!--          draggable: true,-->
<!--          // value: '智能优化闭环',-->
<!--          itemStyle: { color: '#409eff' }-->
<!--        }-->
<!--      ];-->

<!--      const links = [-->
<!--        { source: 'system', target: 'songda', name: '支撑' },-->
<!--        { source: 'system', target: 'guanlian', name: '支撑' },-->
<!--        { source: 'system', target: 'qingchang', name: '支撑' },-->
<!--        { source: 'system', target: 'pinggu', name: '支撑' },-->
<!--        { source: 'system', target: 'fankui', name: '支撑' }-->
<!--      ];-->

<!--      const option = {-->
<!--        title: {-->
<!--          text: '海法 · 斥候',-->
<!--          // subtext: '点击模块进入对应功能',-->
<!--          top: '20',-->
<!--          left: 'center',-->
<!--          textStyle: {-->
<!--            fontSize: 20,-->
<!--            fontWeight: 'bold',-->
<!--            color: '#1a73e8'-->
<!--          },-->
<!--          subtextStyle: {-->
<!--            color: '#444444',-->
<!--            fontSize: 16-->
<!--          }-->
<!--        },-->
<!--        tooltip: {-->
<!--          formatter: function (params) {-->
<!--            if (params.dataType === 'node') {-->
<!--              return `${params.name}<br/>${params.data.value}`;-->
<!--            } else if (params.dataType === 'edge') {-->
<!--              return `${params.data.source} → ${params.data.target}<br/>关系: ${params.data.name}`;-->
<!--            }-->
<!--            return '';-->
<!--          }-->
<!--        },-->
<!--        legend: [{-->
<!--          data: ['核心系统', '业务模块'],-->
<!--          bottom: '10',-->
<!--          right: '10',-->
<!--          textStyle: { color: '#333' }-->
<!--        }],-->
<!--        animationDuration: 1500,-->
<!--        animationEasingUpdate: 'quinticInOut',-->
<!--        series: [{-->
<!--          name: '斥候系统图谱',-->
<!--          type: 'graph',-->
<!--          layout: 'force',-->
<!--          force: {-->
<!--            repulsion: 500,-->
<!--            gravity: 0.1,-->
<!--            edgeLength: 200,-->
<!--            layoutAnimation: true-->
<!--          },-->
<!--          data: nodes,-->
<!--          links: links,-->
<!--          categories: [-->
<!--            { name: '核心系统', itemStyle: { color: '#409eff' } },-->
<!--            { name: '业务模块', itemStyle: { color: '#67c23a' } }-->
<!--          ],-->
<!--          roam: true,-->
<!--          label: {-->
<!--            show: true,-->
<!--            position: 'inside',-->
<!--            formatter: '{b}',-->
<!--            fontSize: 12,-->
<!--            color: '#000000'-->
<!--          },-->
<!--          labelLayout: {-->
<!--            hideOverlap: true-->
<!--          },-->
<!--          emphasis: {-->
<!--            focus: 'adjacency',-->
<!--            lineStyle: {-->
<!--              width: 5-->
<!--            }-->
<!--          },-->
<!--          lineStyle: {-->
<!--            color: 'source',-->
<!--            curveness: 0.1-->
<!--          }-->
<!--        }]-->
<!--      };-->

<!--      newGraphChart.setOption(option, true);-->

<!--      // 绑定点击事件-->
<!--      newGraphChart.off('click');-->
<!--      newGraphChart.on('click', (params) => {-->
<!--        if (params.dataType === 'node') {-->
<!--          const nodeId = params.data.id;-->
<!--          switch (nodeId) {-->
<!--            case 'songda':-->
<!--              router.push('/manage2'); // 跳转到司法送达页面-->
<!--              break;-->
<!--            case 'guanlian':-->
<!--              router.push('/manage3'); // 跳转到关联人查询-->
<!--              break;-->
<!--            case 'qingchang':-->
<!--              router.push('/manage4'); // 跳转到清场辅助-->
<!--              break;-->
<!--            case 'pinggu':-->
<!--              router.push('/manage10'); // 跳转到企业评估-->
<!--              break;-->
<!--            case 'fankui':-->
<!--              router.push('/manage5'); // 或者跳转到反馈修正页面-->
<!--              break;-->
<!--            default:-->
<!--              console.log('点击了未知节点:', nodeId);-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    };-->

<!--    onMounted(() => {-->
<!--      loadCaseTypes();-->
<!--      loadStats();-->
<!--      window.addEventListener('resize', handleResize);-->
<!--      // 使用 nextTick 确保 DOM 渲染完成后再初始化图表-->
<!--      nextTick(() => {-->
<!--        initNewKnowledgeGraph();-->
<!--      });-->
<!--    });-->


<!--    onBeforeUnmount(() => {-->
<!--      window.removeEventListener('resize', handleResize);-->
<!--      if (graphChart) {-->
<!--        graphChart.dispose();-->
<!--      }-->
<!--    });-->

<!--    return {-->
<!--      newGraphContainer,-->
<!--      graphContainer,-->
<!--      search,-->
<!--      stats,-->
<!--      quickSearch-->
<!--    };-->
<!--  }-->
<!--};-->

<!--</script>-->


<!--<style scoped>-->
<!--.knowledge-graph-dashboard {-->
<!--  padding: 20px;-->
<!--  height: 100%;-->
<!--  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);-->
<!--}-->

<!--.search-section {-->
<!--  margin-bottom: 20px;-->
<!--  background: white;-->
<!--  border-radius: 8px;-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--  padding: 20px;-->
<!--}-->

<!--.search-form {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 10px;-->
<!--}-->

<!--.content-wrapper {-->
<!--  display: flex;-->
<!--  gap: 15px; /* 增加间距 */-->
<!--  height: calc(100vh - 160px); /* 增加图谱区域高度 */-->
<!--}-->

<!--.graph-section {-->
<!--  flex: 7; /* 进一步增大图谱区域比例 */-->
<!--  min-width: 0; /* 防止内容溢出 */-->
<!--}-->

<!--.stats-section {-->
<!--  flex: 3; /* 减小右侧区域比例 */-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  gap: 8px; /* 减小卡片间距 */-->
<!--  max-width: 180px; /* 减小右侧板块最大宽度 */-->
<!--}-->

<!--.graph-container {-->
<!--  height: 100%;-->
<!--  background: white;-->
<!--  border-radius: 8px;-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--  overflow: hidden;-->
<!--  padding: 10px; /* 增加内边距 */-->
<!--}-->

<!--.graph-content {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--}-->

<!--.stat-card {-->
<!--  background: rgba(255, 255, 255, 0.9);-->
<!--  border-radius: 5px;-->
<!--  padding: 8px 4px; /* 减小内边距 */-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);-->
<!--  text-align: center;-->
<!--  backdrop-filter: blur(10px);-->
<!--  flex: 1;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  justify-content: center;-->
<!--  min-height: 50px; /* 减小最小高度 */-->
<!--}-->

<!--.stat-value {-->
<!--  font-size: 16px; /* 减小字体 */-->
<!--  font-weight: bold;-->
<!--  color: #409eff;-->
<!--  margin-bottom: 2px;-->
<!--}-->

<!--.stat-label {-->
<!--  font-size: 10px; /* 减小字体 */-->
<!--  color: #606266;-->
<!--}-->

<!--@media (max-width: 768px) {-->
<!--  .content-wrapper {-->
<!--    flex-direction: column;-->
<!--    height: auto;-->
<!--  }-->

<!--  .search-form {-->
<!--    flex-direction: column;-->
<!--  }-->

<!--  .search-form .el-input,-->
<!--  .search-form .el-button {-->
<!--    width: 100%;-->
<!--    margin-right: 0 !important;-->
<!--    margin-bottom: 10px;-->
<!--  }-->

<!--  .stats-section {-->
<!--    flex-direction: row;-->
<!--    flex-wrap: wrap;-->
<!--    max-width: 100%;-->
<!--  }-->

<!--  .stat-card {-->
<!--    min-width: 45%;-->
<!--  }-->
<!--}-->
<!--.new-graph-section {-->
<!--  flex: 7;-->
<!--  min-width: 0;-->
<!--}-->

<!--.new-graph-container {-->
<!--  height: 100%;-->
<!--  background: white;-->
<!--  border-radius: 8px;-->
<!--  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);-->
<!--  overflow: hidden;-->
<!--  padding: 10px;-->
<!--}-->

<!--.new-graph-content {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--}-->

<!--</style>-->

<template>
  <div class="home" style="width: 100%;padding: 10px">
    <div style="margin:10px 0;">
      <el-input
          clearable
          v-model="search.name"
          placeholder="请输入姓名"
          style="width:20%;margin-right:10px;"
          @keyup.enter="load"></el-input>
      <el-input clearable v-model="search.phone" placeholder="请输入手机号"
                style="width:20%;margin-right:10px;"></el-input>
      <el-input clearable v-model="search.idCard" placeholder="请输入身份证号"
                style="width:20%;margin-right:10px;"></el-input>
      <el-button type="primary" @click="load">查询</el-button>

      <!-- 历史记录按钮 -->
      <el-button type="default" @click="showHistory = !showHistory" style="margin-left:10px;">
        <i class="el-icon-time"></i> 历史记录
        <span v-if="historyList.length > 0" class="history-badge">{{ historyList.length }}</span>
      </el-button>
    </div>

    <!-- 历史记录面板 -->
    <el-collapse v-model="activeHistoryPanel" v-if="showHistory" style="margin-bottom:15px;">
      <el-collapse-item title=" 查询历史（点击折叠）" name="1">
        <div v-if="historyList.length === 0" class="empty-history">
          暂无查询历史记录
        </div>
        <el-timeline v-else>
          <el-timeline-item
              v-for="(item, index) in historyList"
              :key="index"
              :timestamp="formatTime(item.time)"
              placement="top"
          >
            <el-card>
              <div class="history-content">
                <div>姓名: {{ item.search.name || '未填写' }}</div>
                <div>手机号: {{ item.search.phone || '未填写' }}</div>
                <div>身份证号: {{ item.search.idCard || '未填写' }}</div>
              </div>
              <div class="history-actions">
                <el-button
                    size="mini"
                    type="text"
                    @click="loadFromHistory(item.search)"
                >
                  重新查询
                </el-button>
                <el-button
                    size="mini"
                    type="text"
                    class="text-danger"
                    @click="deleteHistory(index)"
                >
                  删除
                </el-button>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>

        <el-button
            type="text"
            class="clear-all-history"
            @click="clearAllHistory"
            v-if="historyList.length > 0"
        >
          清除全部历史记录
        </el-button>
      </el-collapse-item>
    </el-collapse>

    <el-table :data="paginatedData" border stripe style="width: 100%;">
      <el-table-column prop="anHao" label="案号"/>
      <el-table-column prop="proposer" label="申请人"/>
      <el-table-column prop="executor" label="被查询人"/>
      <el-table-column prop="idNumber" label="被查询人身份证"/>
      <el-table-column prop="phone" label="被查询人手机号"/>
      <el-table-column prop="caseDetail" label="案件内容"/>
      <el-table-column prop="caseMoney" label="申请执行金额（元）"/>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button size="small" type="primary" @click="goToDataSummary(scope.row)">
            数据汇总
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';
import { useRouter } from 'vue-router';

export default {
  name: 'HomeView1',
  setup() {
    const router = useRouter();
    return { router };
  },
  mounted() {
    this.load();
    // 从localStorage加载历史记录
    this.loadHistoryFromStorage();
  },
  data() {
    return {
      search: {
        name: '',
        phone: '',
        idCard: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      paginatedData: [],
      // 历史记录相关
      historyList: [],
      showHistory: false,
      activeHistoryPanel: ['1']
    };
  },

  methods: {
    load() {
      axios.post("/api/caseInformation/getCaseInformation", {
        executor: this.search.name,
        phone: this.search.phone,
        idNumber: this.search.idCard,
      })
          .then(response => {
            const result = response.data;
            this.tableData = result;
            this.total = this.tableData.length;
            this.fetchData();

            // 如果有有效的查询条件，保存到历史记录
            if (this.search.name || this.search.phone || this.search.idCard) {
              this.saveToHistory();
            }
          })
          .catch(error => {
            console.log('error', error);
          });
    },

    // 保存查询条件到历史记录
    saveToHistory() {
      // 深拷贝查询条件，避免引用问题
      const searchData = JSON.parse(JSON.stringify(this.search));

      // 检查是否和上一条记录相同，避免重复保存
      const lastRecord = this.historyList[0];
      if (lastRecord &&
          lastRecord.search.name === searchData.name &&
          lastRecord.search.phone === searchData.phone &&
          lastRecord.search.idCard === searchData.idCard) {
        return;
      }

      // 创建历史记录项
      const historyItem = {
        search: searchData,
        time: new Date().getTime() // 记录时间戳
      };

      // 添加到历史列表开头
      this.historyList.unshift(historyItem);

      // 限制历史记录数量，最多保存20条
      if (this.historyList.length > 100) {
        this.historyList.pop();
      }

      // 保存到localStorage
      this.saveHistoryToStorage();
    },

    // 从localStorage加载历史记录
    loadHistoryFromStorage() {
      const savedHistory = localStorage.getItem('queryHistory');
      if (savedHistory) {
        try {
          this.historyList = JSON.parse(savedHistory);
        } catch (e) {
          console.error('Failed to parse history from localStorage', e);
          localStorage.removeItem('queryHistory');
        }
      }
    },

    // 保存历史记录到localStorage
    saveHistoryToStorage() {
      localStorage.setItem('queryHistory', JSON.stringify(this.historyList));
    },

    // 从历史记录加载查询条件并执行查询
    loadFromHistory(searchData) {
      this.search = JSON.parse(JSON.stringify(searchData));
      this.load();
    },

    // 删除单条历史记录
    deleteHistory(index) {
      this.historyList.splice(index, 1);
      this.saveHistoryToStorage();
    },

    // 清除所有历史记录
    clearAllHistory() {
      this.$confirm('确定要清除所有查询历史记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.historyList = [];
        this.saveHistoryToStorage();
        this.$message({
          type: 'success',
          message: '已清除所有历史记录'
        });
      }).catch(() => {
        // 用户取消操作
      });
    },

    // 格式化时间显示
    formatTime(timestamp) {
      const date = new Date(timestamp);
      return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
    },

    fetchData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.paginatedData = this.tableData.slice(start, end);
    },

    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },

    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.load();
    },

    goToDataSummary(row) {
      this.router.push({
        name: 'DataSummary',
        query: {
          idNumber: row.idNumber,
          name: row.executor,
          phone: row.phone
        }
      });
    }
  }
}
</script>

<style scoped>
.home {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.history-badge {
  display: inline-block;
  background-color: #1890ff;
  color: white;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 12px;
  margin-left: 5px;
}

.el-timeline {
  padding: 10px 0;
}

.el-timeline-item {
  margin-bottom: 15px;
}

.history-content {
  margin-bottom: 10px;
  font-size: 14px;
}

.history-content > div {
  margin-bottom: 4px;
}

.history-actions {
  text-align: right;
  margin-top: 5px;
}

.empty-history {
  text-align: center;
  padding: 20px;
  color: #909399;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.clear-all-history {
  color: #f56c6c;
  margin-top: 10px;
  display: block;
  text-align: center;
}
</style>